<template>
  <view class="identity-upload">
    <view class="upload-section">
      <view class="upload-title">
        <text class="required">*</text>
        <text>上传身份证信息(证件信息需真实清晰)</text>
      </view>
      <view class="upload-area">
        <view class="upload-item" @click="uploadIdCardFront">
          <view v-if="!front" class="upload-placeholder">
            <view class="upload-outline">
              <view class="person-outline"></view>
            </view>
          </view>
          <image v-else :src="front" class="uploaded-image" mode="aspectFit"></image>
          <!-- OCR状态指示器 -->
          <view v-if="frontOcrStatus !== 'idle'" class="ocr-status">
            <view v-if="frontOcrStatus === 'loading'" class="status-loading">
              <text>验证中...</text>
            </view>
            <view v-else-if="frontOcrStatus === 'success'" class="status-success">
              <text>✓ 验证成功</text>
            </view>
            <view v-else-if="frontOcrStatus === 'error'" class="status-error">
              <text>✗ 验证失败</text>
            </view>
          </view>
          <text class="upload-text">身份证人像面</text>
        </view>
        <view class="upload-item" @click="uploadIdCardBack">
          <view v-if="!back" class="upload-placeholder fm">
            <view class="upload-outline">
              <view class="emblem-outline"></view>
            </view>
          </view>
          <image v-else :src="back" class="uploaded-image" mode="aspectFit"></image>
          <!-- OCR状态指示器 -->
          <view v-if="backOcrStatus !== 'idle'" class="ocr-status">
            <view v-if="backOcrStatus === 'loading'" class="status-loading">
              <text>验证中...</text>
            </view>
            <view v-else-if="backOcrStatus === 'success'" class="status-success">
              <text>✓ 验证成功</text>
            </view>
            <view v-else-if="backOcrStatus === 'error'" class="status-error">
              <text>✗ 验证失败</text>
            </view>
          </view>
          <text class="upload-text">身份证国徽面</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { verifyApi } from '@/api/api-helper.js'

// 定义 props
const props = defineProps<{
  front: string
  back: string
}>()

const emit = defineEmits(['update:front', 'update:back', 'ocr-success', 'ocr-error'])

// OCR验证状态
const frontOcrStatus = ref<'idle' | 'loading' | 'success' | 'error'>('idle')
const backOcrStatus = ref<'idle' | 'loading' | 'success' | 'error'>('idle')

const uploadIdCardFront = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: async (res) => {
      const filePath = res.tempFilePaths[0]
      emit('update:front', filePath)
      
      // 立即调用OCR接口验证身份证正面
      frontOcrStatus.value = 'loading'
      uni.showLoading({ title: '验证身份证正面...' })
      
      try {
        const result = await verifyApi.ocrIdCard('front', filePath)
        if (result && result.code === 200) {
          frontOcrStatus.value = 'success'
          uni.hideLoading()
          uni.showToast({ title: '身份证正面验证成功', icon: 'success' })
          emit('ocr-success', { type: 'front', data: result.data })
        } else {
          frontOcrStatus.value = 'error'
          uni.hideLoading()
          uni.showToast({ title: '身份证正面验证失败，请重新上传', icon: 'none' })
          emit('ocr-error', { type: 'front', message: result?.message || '验证失败' })
        }
      } catch (error) {
        frontOcrStatus.value = 'error'
        uni.hideLoading()
        uni.showToast({ title: '网络错误，请重试', icon: 'none' })
        emit('ocr-error', { type: 'front', message: '网络错误' })
      }
    }
  })
}

const uploadIdCardBack = () => {
  uni.chooseImage({
    count: 1,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: async (res) => {
      const filePath = res.tempFilePaths[0]
      emit('update:back', filePath)
      
      // 立即调用OCR接口验证身份证反面
      backOcrStatus.value = 'loading'
      uni.showLoading({ title: '验证身份证反面...' })
      
      try {
        const result = await verifyApi.ocrIdCard('back', filePath)
        if (result && result.code === 200) {
          backOcrStatus.value = 'success'
          uni.hideLoading()
          uni.showToast({ title: '身份证反面验证成功', icon: 'success' })
          emit('ocr-success', { type: 'back', data: result.data })
        } else {
          backOcrStatus.value = 'error'
          uni.hideLoading()
          uni.showToast({ title: '身份证反面验证失败，请重新上传', icon: 'none' })
          emit('ocr-error', { type: 'back', message: result?.message || '验证失败' })
        }
      } catch (error) {
        backOcrStatus.value = 'error'
        uni.hideLoading()
        uni.showToast({ title: '网络错误，请重试', icon: 'none' })
        emit('ocr-error', { type: 'back', message: '网络错误' })
      }
    }
  })
}
</script>

<style lang="scss" scoped>
.identity-upload {
  padding: 30rpx;
  background-color: #FFFFFF;
  margin-bottom: 20rpx;
}

.upload-section {
  .upload-title {
    margin-bottom: 30rpx;
    
    text {
      font-size: 28rpx;
      color: #333333;
    }
    
    .required {
      color: #FF4444;
      margin-right: 8rpx;
    }
  }
  
  .upload-area {
    display: flex;
    gap: 20rpx;
    
    .upload-item {
      flex: 1;
      text-align: center;
      
      .upload-placeholder {
        width: 100%;
        height: 200rpx;
        background-color: #FFF5E6;
        border: 2rpx dashed #FFB088;
        border-radius: 12rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        margin-bottom: 15rpx;
        background-image: url(@/static/index/id_0.png);
        background-size: 100% 100%;
        
        &.fm {
          background-image: url(@/static/index/id_1.png);
          background-size: 100% 100%;
        }
        
        .upload-outline {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          z-index: 1;
          opacity: 0.3;
          
          .person-outline {
            width: 80rpx;
            height: 100rpx;
            border: 2rpx solid #FFB088;
            border-radius: 40rpx 40rpx 20rpx 20rpx;
            position: relative;
            
            &::before {
              content: '';
              position: absolute;
              top: -10rpx;
              left: 50%;
              transform: translateX(-50%);
              width: 40rpx;
              height: 40rpx;
              border: 2rpx solid #FFB088;
              border-radius: 50%;
            }
            
            &::after {
              content: '';
              position: absolute;
              bottom: 10rpx;
              left: 50%;
              transform: translateX(-50%);
              width: 20rpx;
              height: 4rpx;
              background-color: #FFB088;
              border-radius: 2rpx;
            }
          }
          
          .emblem-outline {
            width: 80rpx;
            height: 80rpx;
            border: 2rpx solid #FFB088;
            border-radius: 50%;
            position: relative;
            
            &::before {
              content: '';
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 40rpx;
              height: 40rpx;
              border: 2rpx solid #FFB088;
              border-radius: 50%;
            }
            
            &::after {
              content: '';
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              width: 20rpx;
              height: 20rpx;
              border: 2rpx solid #FFB088;
              border-radius: 50%;
            }
          }
        }
      }
      
      .uploaded-image {
        width: 100%;
        height: 200rpx;
        border-radius: 12rpx;
        margin-bottom: 15rpx;
      }
      
      .upload-text {
        font-size: 24rpx;
        color: #666666;
      }
      
      .ocr-status {
        position: absolute;
        top: 10rpx;
        right: 10rpx;
        z-index: 10;
        
        .status-loading {
          background-color: rgba(255, 193, 7, 0.9);
          color: #333333;
          padding: 8rpx 12rpx;
          border-radius: 20rpx;
          font-size: 20rpx;
        }
        
        .status-success {
          background-color: rgba(76, 175, 80, 0.9);
          color: #FFFFFF;
          padding: 8rpx 12rpx;
          border-radius: 20rpx;
          font-size: 20rpx;
        }
        
        .status-error {
          background-color: rgba(244, 67, 54, 0.9);
          color: #FFFFFF;
          padding: 8rpx 12rpx;
          border-radius: 20rpx;
          font-size: 20rpx;
        }
      }
    }
  }
}
</style> 